<!-- 投诉管理 -->
<template>
	<view>
		<u-navbar :isFixed="true" title="投诉管理" :borderBottom="false"></u-navbar>
		<view class="card" v-for="(item,index) in list" :key="index">
			<view class="top flex_bet_align" :class="item.state==1?'green':(item.state==2?'green':(item.state==3?'gray':'red'))">
				<view class="time">提交时间：{{item.createtime}}</view>
				<!-- <view class="status">{{item.state==1?'已提交':(item.state==2?'待处理':(item.state==3?'已处理':'已驳回'))}}</view> -->
				<view class="status">{{item.state==1?'待处理':(item.state==2?'已处理':'已驳回')}}</view>
			</view>
			<view class="bot">
				<view class="name">投诉对象：{{item.nickname}}</view>
				<view class="content">{{item.content}}</view>
				<view class="flex_content_wrap">
					<block v-for="itemimg in item.images">
						<u-image width="180rpx" height="180rpx" style="margin: 10rpx;" @click="$plug.showImg(item.images,itemimg)" :src="itemimg"></u-image>
					</block>
				</view>
				<block v-if="item.rcontent.length">
					<view class="show" @click="show(index)" v-show="cur!=index">展开</view>
					<block v-if="cur==index">
						<view class="feedback">
							<view class="title">平台回复：</view>
							<view class="content">{{item.rcontent}}</view>
						</view>
						<view class="show" @click="hide(index)">收起</view>
					</block>
				</block>
			</view>
		</view>
		<view class="not_more" v-if="list.length<1">
			<image src="../static/img/wxiaoxi.png" mode="widthFix"></image>
			<view class="text">暂无投诉</view>
		</view>
		<view class="nomore" v-if="nomore&&list.length>0">—— · 没有更多了 · ——</view>
	</view>
</template>

<script>
	var _this, $paginator;
	export default {
		data() {
			return {
				cur:null,
				nomore:false,
				list:[],
				
			}
		},
		onLoad(options) {
			_this = this
			$paginator = new _this.$paginator(_this.$api)
			_this.getdata(true)
		},
		onReachBottom: function() {
			$paginator.nextPager(() => {
				_this.getdata()
			})
		},
		methods: {
			getdata: function(firstLoad = false) {
				$paginator.getData('getcomplaint', {}, (data) => {
					if (firstLoad) {
						_this.list = data.list ? data.list : []
					} else {
						_this.list = _this.list.concat(data.list)
					}
					_this.nomore = data.nomore
				})
			},
			show(e){
				this.cur = e
			},
			hide(e){
				this.cur = null
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background:#F3F3F3;
	}
	.card{
		width: 700rpx;
		margin:25rpx auto;
		background: #ffffff;
		border-radius: 10rpx;
		.top{
			width: 700rpx;
			height: 88rpx;
			padding:29rpx 27rpx 33rpx 28rpx;
			
			border-radius: 10rpx 10rpx 0 0;
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-Medium;
			font-weight: 500;
			color: #ffffff;
		}
		.green{
			background: #38be8c;
		}
		.gray{
			background:#999999;
		}
		.red{
			background-color: #FF0000;
		}
		.bot{
			background-color: #FFFFFF;
			padding:25rpx 49rpx 39rpx 29rpx;
			border-radius:0 0 10rpx 10rpx;
			.name{
				font-size: 26rpx;
				margin-bottom: 32rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
			}
			.content{
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				line-height: 36rpx;
			}
			.show{
				font-size: 26rpx;
				font-family: PingFang SC-Medium;
				text-align: center;
				color: #999999;
				margin-top:60rpx;
			}
			.feedback{
				border-top:1rpx solid #FAFAFA;
				margin-top:41rpx;
				padding-top:31rpx;
				.title{
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					text-align: left;
					color: #969696;
					margin-bottom: 29rpx;
				}
				.content{
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 500;
					text-align: left;
					color: #3e4350;
					line-height: 42rpx;
				}
			}
		}
	}
</style>
